﻿<template>
    <div>
        <div :style="{ padding: '24px', minHeight: '480px', background: '#fff' }">
            <el-row style="margin-bottom:12px">
                <div style="float: right;">
                    <el-button size="small" v-on:click="add()" type="primary">虾皮商品导入</el-button>
                    <el-button size="small" v-on:click="add3()" type="primary">Tiktok商品导入</el-button>
                    <el-button size="small" v-on:click="add2()" type="success">手动录入商品</el-button>
                </div>
            </el-row>
            <el-form ref="queryParams" inline label-position="right" label-width="80px" v-model="queryParams">
                <el-form-item label="商品名">
                    <el-input size="small" v-model="queryParams.productName" @keyup.enter.native="search()" placeholder="商品名" style="width: 160px" />
                </el-form-item>
                <el-form-item label="货号/规格">
                    <el-input size="small" v-model="queryParams.variationName" @keyup.enter.native="search()" placeholder="货号/规格" style="width: 160px" />
                </el-form-item>
                <el-form-item label="sku编码">
                    <el-input size="small" v-model="queryParams.skuCode" @keyup.enter.native="search()" placeholder="sku编码" style="width: 160px" />
                </el-form-item>
                <el-form-item label="主货号">
                    <el-input size="small" v-model="queryParams.spuCode" @keyup.enter.native="search()" placeholder="请输入主货号" style="width: 160px" />
                </el-form-item>
                <el-form-item label="库存">
                    <el-input size="small" v-model="queryParams.minStock" @keyup.enter.native="search()" placeholder="最小" style="width: 80px" />
                    <el-input size="small" v-model="queryParams.maxStock" @keyup.enter.native="search()" placeholder="最大" style="width: 80px" />
                </el-form-item>
                <el-form-item label="分类">
                    <el-select size="small" v-model="queryParams.categoryId" filterable placeholder="请选择">
                        <el-option :label="'未设置分类'" :value="0">
                        </el-option>
                        <el-option :label="'全部分类'" value="">
                        </el-option>
                        <el-option v-for="item in categorys" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button size="small" icon="el-icon-refresh" @click="getCategorys" :loading="loadingCategory"></el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">{{ $t('搜索') }}</el-button>
                    <el-button size="small" v-on:click="reset()">{{ $t('重置') }}</el-button>
                </el-form-item>
            </el-form>
            <el-row :style="{ marginBottom: '20px' }">
                <font color="#f00">{{ $t("分类") }}：</font>
                <el-button :type="queryParams.categoryId == '' ? 'danger' : 'default'" @click="queryParams.categoryId = ''; search();" size="small">全部</el-button>
                <el-button size="small" :type="queryParams.categoryId == item.id ? 'success' : ''" v-for="item in categorys" :key="item.id" @click="queryParams.categoryId = item.id; search();"> {{
                    item.name }}
                </el-button>
                <el-button :type="queryParams.categoryId == 0 ? 'danger' : 'default'" @click="queryParams.categoryId = 0; search();" size="small">未分类</el-button>
            </el-row>
            <el-row style="margin-bottom:12px">
                <el-alert type="warning" effect="dark">
                    <span style="line-height: 28px;font-size: 14px">在仓统计：<font class="fprice">{{ storageData.stock }}
                        </font>件，共<font class="fprice">{{ storageData.volume }}</font>立方，<font class="fprice">
                            {{ storageData.price }}</font>元
                    </span>
                    <el-button @click="refreshData()" :loading="dataLoading" style="float: right;margin-left: 10px" size="small">刷新</el-button>
                </el-alert>
            </el-row>
            <el-row style="margin-bottom:12px">
                <font style="margin-left: 20px">排序：</font>
                <el-select v-model="queryParams.orderBy" @change="getList()" style="width:140px;" size="small">
                    <el-option :value="7" label="货值优先"></el-option>
                    <el-option :value="5" label="创建时间"></el-option>
                    <el-option :value="6" label="畅销优先"></el-option>
                    <el-option :value="1" label="库存优先"></el-option>
                    <el-option :value="2" label="缺货优先"></el-option>
                    <el-option :value="3" label="滞销优先"></el-option>
                    <el-option :value="4" label="sku编码"></el-option>
                </el-select>
                <el-divider direction="vertical"></el-divider>
                <el-button size="small" @click="handleSelectionAll">{{ selectAll ? '取消全选' : '全部选择' }}
                </el-button>
                <!-- <el-button size="small" :type="'default'" @click="handleSelectionCancle">取消选择
                </el-button> -->
                <template v-if="queryParams.state == -1">
                    <el-button size="small" @click="batchDoSale" type="success">批量上架</el-button>
                    <el-button size="small" @click="batchDoDelete" type="danger">批量删除</el-button>
                </template>
                <template v-else>
                    <el-button size="small" @click="batchOffSale" type="danger">批量下架</el-button>
                </template>
                <el-button size="small" @click="batchCategory" type="primary">批量设置分类</el-button>
                <el-button size="small" @click="batchStock" type="success">批量设置库存</el-button>
            </el-row>
            <el-row style="margin-bottom:12px">
                <font style="margin-left: 20px">快捷筛选：</font>
                <el-button size="small" :type="queryParams.state == null ? 'success' : 'default'" @click="searchOrder(null)">全部</el-button>
                <el-button size="small" :type="queryParams.state == 0 ? 'success' : 'default'" @click="searchOrder(0)">在售
                </el-button>
                <el-button size="small" :type="queryParams.state == -1 ? 'success' : 'default'" @click="searchOrder(-1)">下架
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <font style="margin-left: 20px">公共分享：</font>
                <el-button size="small" :type="queryParams.sharePublic == null ? 'success' : 'default'" @click="searchOrderShare(null)">全部</el-button>
                <el-button size="small" :type="queryParams.sharePublic == 1 ? 'success' : 'default'" @click="searchOrderShare(1)">已共享
                </el-button>
                <el-button size="small" :type="queryParams.sharePublic == 0 ? 'success' : 'default'" @click="searchOrderShare(0)">未共享
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <font style="margin-left: 20px">库存预警：</font>
                <el-button size="small" :type="queryParams.stockType == null ? 'success' : 'default'" @click="searchStock(null)">全部</el-button>
                <el-button size="small" :type="queryParams.stockType == 1 ? 'success' : 'default'" @click="searchStock(1)">缺货/预警<el-badge :value="stockCount.allCount"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.stockType == 2 ? 'success' : 'default'" @click="searchStock(2)">缺货<el-badge :value="stockCount.noCount"></el-badge>
                </el-button>
                <el-button size="small" :type="queryParams.stockType == 3 ? 'success' : 'default'" @click="searchStock(3)">预警<el-badge :value="stockCount.warnCount"></el-badge>
                </el-button>
                <el-button icon="el-icon-refresh" @click="getStockCount()" :loading="loadingRefresh" size="small" circle></el-button>
                <el-button size="small" style="float:right" type="success" @click="exportExcel()">导出Excel</el-button>
            </el-row>
            <div style="margin: 10px;overflow: hidden">
                <div style="float:right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage">
                    </Page>
                </div>
                <el-select size="small" @change="page.current = 1; getList();" v-model="page.pageSize" style="width: 120px;float: left;">
                    <el-option :value="10">每页10条</el-option>
                    <el-option :value="20">每页20条</el-option>
                    <el-option :value="30">每页30条</el-option>
                    <el-option :value="50">每页50条</el-option>
                </el-select>
            </div>
            <el-table size="small" ref="tbProducts" :data="storageProducts" border style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" fixed="left" prop="state" label="操作" width="270">
                    <template slot-scope="scope">
                        <div class="state-error" style="font-size:14px">
                            {{ scope.row.subUserName }}
                        </div>
                        <div>
                            <el-button size="small" type="primary" @click="stockDetails(scope.row)">库存明细</el-button>
                            <el-button size="small" v-if="scope.row.state == 0" type="info" @click="edit(scope.row)">修改</el-button>
                            <el-button size="small" v-if="scope.row.state == 0" type="danger" @click="offSale(scope.row.id)">下架</el-button>
                            <template v-else>
                                <el-button size="small" type="success" @click="doSale(scope.row.id)">上架</el-button>
                                <el-button size="small" type="danger" @click="doDelete(scope.row.id)">删除</el-button>
                            </template>
                        </div>
                        <div style="margin-top: 10px;">
                            <el-button size="small" type="success" @click="storageProduct = scope.row; $refs['refPrintCode'].showDialog();">打印sku条码</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="图片" width="180">
                    <template slot-scope="scope">
                        <div class="state-error" style="font-size: 18px">
                            {{ scope.row.categoryName }}
                        </div>
                        <el-image :src="scope.row.pics" style="width: 100px;height: 100px" />
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="id" label="商品名称" width="200">
                    <template slot-scope="scope">
                        <div style="margin: 5px auto">
                            <span class="state-error" style="font-size: 16px">{{ scope.row.warehouseName }}</span>
                        </div>
                        <div style="margin: 5px auto">
                            主货号:{{ scope.row.spuCode }}
                        </div>
                        <div style="margin: 5px auto">
                            建议零售:{{ scope.row.suggestedRetail }}
                        </div>
                        <div style="margin: 5px auto">
                            商品名:{{ scope.row.productName }}
                            <el-tooltip class="item" effect="dark" content="复制商品" placement="top-start">
                                <span @click="copyProduct(scope.row)"><i class="el-icon-copy-document"></i> </span>
                            </el-tooltip>
                        </div>
                        <div style="margin: 5px auto">
                            <font class="state-error">规格属性：</font> <span :data-clipboard-text="scope.row.variationName" class="btnCopy" @click="copySku()">{{ scope.row.variationName }}</span>
                        </div>
                        <div style="margin: 5px auto">
                            <font class="state-error">sku编码：</font>
                            <el-tooltip class="item" effect="dark" content="双击可复制" placement="top-start">
                                <span :data-clipboard-text="scope.row.skuCode" class="btnCopy" @dblclick="copySku()">{{
                                    scope.row.skuCode }}
                                </span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="查看明细" placement="top-start">
                                <span @click="stockDetails(scope.row)"><i class="el-icon-s-operation"></i> </span>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="出货图表" placement="top-start" style="margin-left:5px">
                                <span @click="stockChart(scope.row)"><i class=" el-icon-pie-chart"></i> </span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="stock" label="库存" width="300">
                    <template slot-scope="scope">
                        <div style="margin: 5px auto">
                            库存：{{ scope.row.stock }}
                            <el-button type="danger" @click="doStock(scope.row)" :loading="scope.row.loadingWarehouse" size="mini">更新库存</el-button>
                        </div>
                        <div style="margin: 5px auto">
                            <template v-if="scope.row.warnEdit">
                                <el-input v-model="scope.row.warnStock" size="small" style="width:120px"></el-input>
                                <el-button @click="saveWarn(scope.row)" size="small" v-loading="scope.row.warnLoading" type="primary">保存</el-button>
                                <el-button @click="scope.row.warnLoading = false; scope.row.warnEdit = false" size="small">
                                    取消
                                </el-button>
                            </template>
                            <template v-else>
                                预警：{{ scope.row.warnStock }}
                                <span style="font-size: 16px" @click="editWarn(scope.row)"><i class="el-icon-edit"></i></span>
                            </template>
                        </div>
                        <div style="margin: 5px auto" class="state-error">
                            累计：{{ scope.row.allStock }}
                        </div>
                       
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="stock" label="库存明细" width="400">
                    <template slot-scope="scope">
                        <div style="margin: 5px auto">
                            <el-tag v-for="(st,ind) in scope.row.stocks">
                                {{st.warehouseName}},{{st.quantity}}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="stock" label="合计" width="100">
                    <template slot-scope="scope">
                        <div style="margin: 5px auto">
                            <span class="state-error">{{ scope.row.preStock + scope.row.purchaseStock + scope.row.stock
                                }}</span>
                           
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="stock" label="体积" width="120">
                    <template slot-scope="scope">
                        <div>长:{{ scope.row.length }}cm</div>
                        <div>宽:{{ scope.row.width }}cm</div>
                        <div>高:{{ scope.row.height }}cm</div>
                        <div>体积:{{ scope.row.volume | fixed(4) }}m3</div>
                        <div>重量:{{ scope.row.weight | fixed(2) }}kg</div>
                        <div class="state-error">合计:{{ (scope.row.volume * scope.row.stock) | fixed(4) }}m3</div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage">
                    </Page>
                </div>
            </div>
        </div>
        <CPrintCode @printCallback="printCallback" ref="refPrintCode" :product="storageProduct"></CPrintCode>
        <CStorageProductAdd :show="modalCreate" @cancel="modalCreate = false;" @ok="modalCreate = false; getList()">
        </CStorageProductAdd>
        <CAsyncProduct :show="modalAdd" @cancel="modalAdd = false" @ok="modalAdd = false; getList()"></CAsyncProduct>
        <CAsyncTkProduct ref="tkDialog" @ok="getList();"></CAsyncTkProduct>
        <CStorageProductChangeList :show="modalChangeListShow" v-bind:productId="moneyChange.productId" v-on:ok="modalChangeListShow = false;" @cancel="modalChangeListShow = false;"></CStorageProductChangeList>
        <Modal title="编辑" v-model="modalEdit" :closable="false" width="800px">
            <el-form style="height:600px;overflow-y: scroll;" ref="storageProduct" label-position="right" label-width="120px" :model="storageProduct" :rules="rules">
                <el-input type="hidden" :model="storageProduct.id" />
                <el-form-item label="商品图片" prop="pics">
                    <el-input v-model="storageProduct.pics" type="hidden" />
                    <ErpImage v-model="storageProduct.pics" />
                    <div>{{ storageProduct.pics }}</div>
                </el-form-item>
                <el-form-item label="采购来源" prop="sourceUrl">
                    <el-input size="small" v-model="storageProduct.sourceUrl" placeholder="采购来源" style="width: 240px" />
                </el-form-item>
                <el-form-item label="商品名称" prop="productName">
                    <el-input size="small" v-model="storageProduct.productName" placeholder="商品名称" style="width: 240px" />
                </el-form-item>
                <el-form-item label="厂家" prop="supplier">
                    <el-input size="small" v-model="storageProduct.supplier" placeholder="厂家" style="width: 240px" />
                </el-form-item>
                <el-form-item label="主货号" prop="spuCode">
                    <el-input size="small" v-model="storageProduct.spuCode" placeholder="主货号" style="width: 240px" />
                </el-form-item>
                <el-form-item label="建议零售" prop="suggestedRetail">
                    <el-input size="small" v-model="storageProduct.suggestedRetail" placeholder="建议零售" style="width: 240px" />
                </el-form-item>
                <el-form-item label="货号/规格" prop="variationName">
                    <el-input size="small" v-model="storageProduct.variationName" placeholder="货号" style="width: 240px" />
                    <font color="#f00">*如果有使用过，不建议修改，有可能会造成仓库找不到货</font>
                </el-form-item>
                <el-form-item label="sku编码" prop="skuCode">
                    <el-input size="small" readonly v-model="storageProduct.skuCode" placeholder="货号" style="width: 240px" />
                </el-form-item>
                <el-form-item label="长cm" prop="length">
                    <el-input size="small" v-model="storageProduct.length" placeholder="长cm" style="width: 240px" />
                </el-form-item>
                <el-form-item label="宽cm" prop="width">
                    <el-input size="small" v-model="storageProduct.width" placeholder="宽cm" style="width: 240px" />
                </el-form-item>
                <el-form-item label="高cm" prop="height">
                    <el-input size="small" v-model="storageProduct.height" placeholder="高cm" style="width: 240px" />
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <el-input size="small" v-model="storageProduct.stock" readonly placeholder="" style="width: 240px" />
                    <font color="#f00">*库存只能通过出入库来管理</font>
                </el-form-item>
                <el-form-item label="预警库存" prop="warnStock">
                    <el-input size="small" v-model="storageProduct.warnStock" placeholder="" style="width: 240px" />
                </el-form-item>
                <el-form-item label="采购中" prop="purchaseStock">
                    <el-input size="small" v-model="storageProduct.purchaseStock" placeholder="采购中" style="width: 240px" />
                    <font color="#f00">*有误，可以通过这里调整</font>
                </el-form-item>
                <el-form-item label="采购价" prop="baseCost">
                    <el-input size="small" v-model="storageProduct.baseCost" placeholder="采购价" style="width: 240px" />
                </el-form-item>
                <el-form-item label="成本" prop="cost">
                    <el-input size="small" v-model="storageProduct.cost" placeholder="" style="width: 240px" />
                </el-form-item>
                <el-form-item label="供货价" prop="salePrice">
                    <el-input size="small" v-model="storageProduct.salePrice" placeholder="供货价" style="width: 240px" />
                </el-form-item>
                <el-form-item label="重量(kg)" prop="weight">
                    <el-input size="small" v-model="storageProduct.weight" placeholder="重量(kg)" style="width: 240px" />
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button size="small" type="primary" :loading="modalLoading" @click="ok">确定</el-button>
            </div>
        </Modal>
        <CSku ref="skuDialog" @cancel="getList()" :skuCode="storageProduct.skuCode" :warehouseId="storageProduct.warehouseId">
        </CSku>
        <CSharePublicDialog ref="sharePublicDialog" @ok="getList()" :product="storageProduct"></CSharePublicDialog>
        <CShareDialog ref="shareDialog" :product="storageProduct"></CShareDialog>
        <CStorageCost ref="costDialog" @ok="getList()"></CStorageCost>
        <CBatchShareDialog ref="batchShareDialog" @ok="getList()"></CBatchShareDialog>
        <CStorageProductChangeChart ref="chartDialog"></CStorageProductChangeChart>
        <CStorageProductChange ref="changeDialog" @ok="getList()"></CStorageProductChange>
        <CCopyDialog ref="copyDialog"></CCopyDialog>
        <CCategoryDialog @ok="getList" ref="categoryDialog"></CCategoryDialog>
        <CUserDialog @ok="getList" ref="userDialog"></CUserDialog>
        <CStorageBillList ref="storagebillDialog"></CStorageBillList>
    </div>
</template>
<script>
import api from "@/api/api"
import CCopyDialog from "./CCopyDialog.vue"
import CCategoryDialog from "./CCategoryDialog.vue"
import CUserDialog from "./CUserDialog.vue"
import CShareDialog from "./CShareDialog.vue"
import CStorageCost from "./CStorageCost.vue"
import CSharePublicDialog from "./CSharePublicDialog.vue"
import CBatchShareDialog from "./CBatchShareDialog.vue"
import CStorageProductChangeList from "./CStorageProductChangeList.vue"
import CAsyncProduct from "./CAsyncProduct.vue"
import CStorageProductChangeChart from "./CStorageProductChangeChart.vue"
import CStorageProductAdd from "./CStorageProductAdd.vue"
import CStorageProductChange from "./CStorageProductChange.vue"
import CAsyncTkProduct from "./CAsyncTkProduct.vue"
import CStorageBillList from "../StorageBill/CStorageBillList.vue"
import CPrintCode from "./CPrintCode.vue"
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'
import CPrintSet from "@/components/StorageBill/CPrintSet.vue"
import CSku from "./CSku.vue"
import iNotify from '@/assets/iNotify'
import Clipboard from 'clipboard'
import { getStorageProductList,getStorageProductStock } from "@/api/ProductApi"
export default {
    name: 'StorageProduct',
    data() {
        return {
            categorys: [],
            loadingCategory: false,
            warehouses: [],
            loadingWarehouse: false,
            stockCount: {
                warnCount: 0,
                noCount: 0,
                allCount: 0,
            },
            loadingRefresh: false,
            extData: {
                sessionKey: localStorage.getItem('sessionKey'),
                token: localStorage.getItem('token')
            },
            uploadJsonUrl: api.uploadJsonUrl,

            printerShow: false,
            printers: [],
            printName: "",
            socket: null,
            dataLoading: false,
            storageData: {
                volume: 0,
                price: 0,
                stock: 0,
                onVolume: 0,
                onPrice: 0,
                onStock: 0,

                purVolume: 0,
                purPrice: 0,
                purStock: 0,
            },
            moneyChange: {

            },
            modalChangeListShow: false,

            modalAdd: false,
            modalCreate: false,
            loading: false,
            modalEdit: false,
            modalLoading: false,

            queryParams: {
                sharePublic: null,
                state: 0,
                orderBy: 1,
                categoryId: '',
                stockType: null,
                spuCode: ''
            },

            storageProduct: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageProducts: [

            ],
            rules: {

                productName: [{ required: true, message: "商品名称" }],
                width: [{ required: true, message: "宽不能为空" }],
                height: [{ required: true, message: "高不能为空" }],
                length: [{ required: true, message: "长不能为空" }],
            },
            selectAll: false,
            multipleSelection: [],
        };
    },
    mounted: function() {
        this.refreshData();

        this.getList();
        this.initPrint();
        // this.getWarehouses();
        this.getStockCount();
        this.getCategorys();

    },
    components: {
        CCopyDialog,
        CUserDialog,
        CCategoryDialog,
        CAsyncProduct,
        CAsyncTkProduct,
        CStorageProductAdd,
        CStorageCost,
        CPrintCode,
        CSku,
        CStorageProductChangeList,
        CStorageProductChangeChart,
        CSharePublicDialog,
        CShareDialog,
        CStorageProductChange,
        CBatchShareDialog,

        CStorageBillList
    },
    methods: {


        getCategorys: function() {
            var me = this;
            me.loadingCategory = true;

            me.$http.post("/storageproductcategory/list.do", {}).then(response => {
                me.loadingCategory = false;
                var body = response;
                if (body.status == 0) {

                    me.categorys = body.obj;

                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                me.loadingCategory = false;
            });
        },
        batchStock() {
            if (this.multipleSelection.length <= 0) {
                this.errorMessage("请先选择要设置的商品");
                return;
            }
            let skuCodes = [];
            this.multipleSelection.forEach((item, ind) => {
                skuCodes.push(item.skuCode);
            });
            var me = this;
            me.showLoading();

            getStorageProductStock({
                skuCodes: skuCodes.join(",")
            }).then(response => {
                me.hideLoading();
                var body = response;
                if (body.status == 0) {

                    me.getList();

                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                me.hideLoading();
            });
        },
        batchCategory() {
            if (this.multipleSelection.length <= 0) {
                this.errorMessage("请先选择要设置的商品");
                return;
            }
            this.$refs['categoryDialog'].showDialog(this.getIds());
        },

        doStock: function(row) {
            // this.$refs['changeDialog'].showDialog(row.id);
            var me = this;
            row.loadingWarehouse = true;

            me.$http.post("/storageproduct/getStock.action", {
                skuCodes: row.skuCode
            }).then(response => {
                row.loadingWarehouse = false;
                var body = response;
                if (body.status == 0) {

                    me.getList();

                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                row.loadingWarehouse = false;
            });
        },
        copySku: function() {
            var me = this;
            var clipboard = new Clipboard(".btnCopy");
            clipboard.on('success', () => {

                clipboard.destroy();
                me.successMessage('复制成功');


            })
            clipboard.on('error', e => {

                me.errorMessage('该浏览器不支持自动复制' + e)

                clipboard.destroy()
            })
        },


        saveWarn: function(row) {
            var me = this;
            row.costLoading = true;
            let params = { ids: row.id, warnStock: row.warnStock };
            me.$http.post("/storageproduct/setCost.do", params).then(response => {
                row.costLoading = false;

                if (response.status == 0) {
                    me.successMessage("成功");
                    row.warnEdit = false;
                } else {
                    me.errorMessage(response.info);
                    me.getList();
                }
            }, response => {
                row.costLoading = false;
                me.errorMessage("系统异常");
            });
        },
        savePrice: function(row) {
            var me = this;
            row.costLoading = true;
            let params = { ids: row.id, cost: row.cost, salePrice: row.salePrice, baseCost: row.baseCost };
            me.$http.post("/storageproduct/setCost.do", params).then(response => {
                row.costLoading = false;

                if (response.status == 0) {
                    me.successMessage("成功");
                    row.costEdit = false;
                } else {
                    me.errorMessage(response.info);
                    me.getList();
                }
            }, response => {
                row.costLoading = false;
                me.errorMessage("系统异常");
            });
        },
        exportExcel: function() {

            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/storageproduct/export.action?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));
        },
        getStockCount: function() {
            this.loadingRefresh = true;
            this.$http.post("/storageproduct/getWarnCount.do", { warehouseId: this.queryParams.warehouseId }).then(response => {
                this.loadingRefresh = false;
                if (response.status == 0)
                    this.stockCount = response.obj
            }, response => {
                this.loadingRefresh = false;
            })
        },
        tableRowClassName: function({ row, rowIndex }) {
            if (row.stock <= 0) {
                return "warning-row";
            }
            return "success-row";
        },

        refreshData: function() {
            var me = this;
            me.dataLoading = true;
            me.$http.post("/storageproduct/statistics.do", {
                warehouseId: me.queryParams.warehouseId
            }).then(response => {
                me.dataLoading = false;
                var body = response;
                if (body.status == 0) {

                    me.storageData = body.obj;

                }

            }, response => {
                me.dataLoading = false;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSelectionAll() {
            this.selectAll = !this.selectAll;
            this.$refs['tbProducts'].toggleAllSelection();
        },
        handleSelectionCancle(val) {
            this.selectAll = false;
            this.$refs['tbProducts'].clearSelection();
        },
        stockDetails: function(row) {
            this.moneyChange.productId = row.id;
            this.modalChangeListShow = true;
        },
        stockChart: function(row) {
            this.$refs['chartDialog'].showDialog({ id: row.id, variationName: row.variationName, productName: row.productName, skuCode: row.skuCode });
        },
        doConnect: function(callback) {
            let serviceUrl = "ws://localhost:13528";
            var me = this;
            me.socket = new WebSocket(serviceUrl);

            // 监听消息
            me.socket.onmessage = function(event) {
                console.log('Client received a message', event);

                let data = JSON.parse(event.data);

                if (data.cmd == "getPrinters") {

                    if (!me.printName) {
                        me.printName = data.defaultPrinter;
                        localStorage.setItem("defaultPrinter", me.printName);
                    }
                    me.printers = data.printers;

                } else if (data.cmd == "print") {

                    if (data.msg == "成功" || data.status == "success") {

                        if (data.hasOwnProperty("previewURL")) {
                            window.open(data['previewURL']);
                        } else {
                            iNotify.player("printOk");
                        }

                    } else {
                        iNotify.player("printError")
                    }
                }

            };

            me.socket.onopen = function(event) {
                if (callback != null) {
                    callback();
                }

            }

            me.socket.onerror = function(error) {
                console.log("Failed to connect CN print at " + serviceUrl, error);

            }

            // 监听Socket的关闭
            me.socket.onclose = function(event) {
                console.log('Client notified socket has closed', event);

            };
        },
        initPrint() {

            if (!this.socket || typeof this.socket == "undefined" || this.socket.readyState == WebSocket.CLOSED) {
                this.doConnect(this.initPrint);
                return;
            }
            if (this.socket && typeof this.socket != "undefined" && this.socket.readyState == 1) {
                this.printName = localStorage.getItem("defaultPrinter");
                this.getPrinters();
            } else {
                this.printName = "";
            }
        },
        getPrinters() {
            this.socket.send(JSON.stringify({
                "cmd": "getPrinters",
                "requestID": getRand(),
                "version": "1.0"
            }));
        },
        setDayin() {
            if (!this.socket || typeof this.socket == "undefined" || this.socket.readyState == WebSocket.CLOSED) {
                //
                this.errorMessage("暂未安装打印控件")
                return;
            }
            this.printerShow = true;
        },
        printSetOk: function(name) {
            this.printName = name;
            localStorage.setItem("defaultPrinter", name);
            this.printerShow = false;
        },
        printCallback: function(formInfo) {

            //回调过来
            if (!this.socket || typeof this.socket == "undefined" || this.socket.readyState == WebSocket.CLOSED) {
                //
                this.errorMessage("暂未安装打印控件")
                return;
            }
            var me = this;
            //打印
            let time = new Date().getTime() + getRand();
            let orderData = [];
            for (var i = 0; i < formInfo.count; i++) {
                orderData.push({
                    "documentID": me.storageProduct.id + "-" + i,
                    "contents": [{
                        data: {
                            shippingNo: localStorage.shippingNo,
                            productName: me.storageProduct.productName,
                            variationName: me.storageProduct.variationName,
                            skuCode: me.storageProduct.skuCode
                        },
                        templateURL: formInfo.templateUrl
                    }]
                });
            }
            let printData = {
                "cmd": "print",
                "version": "1.0",
                "requestId": time,
                "task": {
                    "taskID": "tk" + time,
                    "preview": true,
                    "printer": me.printName,
                    "notifyMode": "allInOne",
                    "previewType": "pdf",
                    "documents": orderData
                }
            }
            //转成json
            me.socket.send(JSON.stringify(printData))

        },


        cbtime: function(value) {
            this.others;
        },
        searchCost: function(ct) {
            this.handleSelectionCancle();
            this.queryParams.cost = ct;
            this.search();
        },
        searchStock: function(ct) {
            this.handleSelectionCancle();
            this.queryParams.stockType = ct;
            this.search();
        },
        searchOrderShare(va) {
            this.handleSelectionCancle();
            this.queryParams.sharePublic = va;
            this.search();
        },
        searchOrder(dt) {

            this.handleSelectionCancle();
            this.queryParams.state = dt;
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {

            this.queryParams = {
                sharePublic: null,
                state: 0,
                orderBy: 1,
                categoryId: '',
                stockType: null
            };
            this.getList();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            me.multipleSelection = [];
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            getStorageProductList(params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    body.obj.list.forEach((item, ind) => {
                        me.$set(item, "showmore", false);
                        me.$set(item, "costEdit", false);
                        me.$set(item, "costLoading", false);
                        me.$set(item, "warnEdit", false);
                        me.$set(item, "warnLoading", false);
                        me.$set(item, "loadingWarehouse", false);

                    });
                    me.storageProducts = body.obj.list;


                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        getIds: function() {
            var ids = [];
            for (var i = 0; i < this.multipleSelection.length; i++) {

                ids.push(this.multipleSelection[i].id);
            }
            return ids.join(",");
        },
        batchDoSale: function() {
            if (this.multipleSelection.length <= 0) {
                this.errorMessage("请先选择要上架的商品");
                return;
            }
            this.handlerDoSale(this.getIds());
        },
        batchOffSale: function() {
            if (this.multipleSelection.length <= 0) {
                this.errorMessage("请先选择要下架的商品");
                return;
            }
            this.handlerOffSale(this.getIds());
        },

        batchDoDelete: function() {
            if (this.multipleSelection.length <= 0) {
                this.errorMessage("请先选择要删除商品");
                return;
            }
            this.handlerDelete(this.getIds());
        },
        offSale: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.handlerOffSale(id + "");
                },
                onCancel: function() {

                }
            });
        },
        handlerOffSale: function(id) {
            this.showLoading();
            this.$http.post("/storageproduct/offSale.do", { id: id }).then(response => {
                this.hideLoading();
                var body = response;
                if (body.status == 0) {
                    this.getList();
                } else {
                    this.errorMessage(body.info);
                }
            }).catch(error => {
                this.hideLoading();
                this.errorMessage("操作异常!");
            });
        },
        doDelete: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.handlerDelete(id);
                },
                onCancel: function() {

                }
            });
        },
        handlerDelete: function(id) {
            this.showLoading();
            this.$http.post("/storageproduct/doDelete.do", { ids: id }).then(response => {
                this.hideLoading();
                var body = response;
                if (body.status == 0) {
                    this.getList();

                } else {
                    this.errorMessage(body.info);
                }
            }).catch(error => {
                this.hideLoading();
                this.errorMessage("操作异常!");
            });
        },
        doSale: function(id) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.handlerDoSale(id);
                },
                onCancel: function() {

                }
            });
        },
        handlerDoSale(id) {
            this.showLoading();
            this.$http.post("/storageproduct/doSale.do", { id: id }).then(response => {
                this.hideLoading();
                var body = response;
                if (body.status == 0) {
                    this.getList();

                } else {
                    this.errorMessage(body.info);
                }
            }).catch(error => {
                this.hideLoading();
                this.errorMessage("操作异常!");
            });
        },
        edit: function(row) {
            this.storageProduct = row;
            this.modalEdit = true;
        },
        add: function() {

            this.modalAdd = true;
        },
        add3: function() {
            this.$refs['tkDialog'].showDialog();
        },
        add2: function() {
            this.modalCreate = true;
        },
        addBill: function() {
            this.$router.push({ name: "StorageBillAdd" })
        },
        cancel: function() {
            this.modalEdit = false;
        },
        ok: function() {

            this.$refs['storageProduct'].validate((valid) => {

                if (valid) {
                    this.okSubmit();
                } else {
                    this.errorMessage('请认真填写数据');
                }
            })


        },
        okSubmit: function() {
            var me = this;

            me.modalLoading = true;
            let product = {
                width: me.storageProduct.width,
                height: me.storageProduct.height,
                length: me.storageProduct.length,
                productName: me.storageProduct.productName,
                variationName: me.storageProduct.variationName,
                warnStock: me.storageProduct.warnStock,
                purchaseStock: me.storageProduct.purchaseStock,
                cost: me.storageProduct.cost,
                baseCost: me.storageProduct.baseCost,
                salePrice: me.storageProduct.salePrice,
                weight: me.storageProduct.weight,
                id: me.storageProduct.id,
                pics: me.storageProduct.pics,
                sourceUrl: me.storageProduct.sourceUrl,
                spuCode: me.storageProduct.spuCode,
                supplier: me.storageProduct.supplier,
                suggestedRetail: me.storageProduct.suggestedRetail
            }
            me.$http.post("/storageproduct/doSave.do", product).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");
                    me.getList();
                    me.modalEdit = false;

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        }

    }
}
</script>
<style scoped>
.el-table .warning-row {
    background: #fdf5e6;
}

.el-table .success-row {
    background: #f0f9eb;
}

.fprice {
    font-size: 18px;
}

.sku-list {}

.sku-list .el-col {
    list-style: none;
}

.sku-list .el-col>div {
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid #67c23a;
}

.sku-list .el-col>div:last-child {
    margin-bottom: 0px;
}

.sku-list .el-col>div.hidemore {
    display: none;
}

.sku-list .el-col>div.showmore {
    display: block;
}

.sku-list .el-col .item-name {
    font-size: 14px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.sku-list .el-col .variation-name {
    font-size: 14px;
    color: #f00;
    margin-bottom: 10px;
}

.sku-list .el-col .shop-name {
    font-size: 16px;
    color: #f00;
    margin-bottom: 10px;
}
</style>